<!-- 参考文档 https://pure-admin.github.io/vue-pure-admin/#/table/index -->
<script setup lang="ts">
import { clone, delay } from "@pureadmin/utils";
import { ref, onMounted, reactive, watch } from "vue";
import type { PaginationProps } from "@pureadmin/table";
import { tableProps } from "../interface";

const dataList = ref([]);
const props = withDefaults(defineProps<tableProps>(), {
  tableData: () => [
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "123",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    }
  ], // 传入tableData数据
  height: undefined, // 用于控制表内容的高度，实现多条表项时能够出现滚动条
  columns: () => [], // 表格样式，采用tsx语法
  pagination: () => ({}), // 在基础分页配置上追加或修改分页配置
  onPagination: true // 是否启用分页
});

watch(props.tableData, () => {
  console.log("AppTable里面检测到了变化", props.tableData);
});

/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: 0,
  align: "right",
  background: true,
  small: false,
  ...props.pagination
});
onMounted(() => {
  delay(600).then(() => {
    const newList = clone(props.tableData, true);
    newList.flat(Infinity).forEach((item, index) => {
      dataList.value.push({ id: index, ...item });
    });
    pagination.total = dataList.value.length;
  });
});
const emit = defineEmits(["clickbtn1", "clickbtn2"]);
const clickbtn1 = (row, index) => {
  emit("clickbtn1", { data: "修改", row, index });
};
const clickbtn2 = (row, index) => {
  emit("clickbtn2", { data: "删除", row, index });
};
</script>

<template>
  <pure-table
    border
    row-key="id"
    alignWhole="center"
    showOverflowTooltip
    :height="props.height"
    :header-cell-style="{
      background: 'var(--el-fill-color-light)',
      color: 'var(--el-text-color-primary)'
    }"
    :data="
      props.onPagination
        ? dataList.slice(
            (pagination.currentPage - 1) * pagination.pageSize,
            pagination.currentPage * pagination.pageSize
          )
        : dataList
    "
    :columns="props.columns"
    :pagination="props.onPagination ? pagination : {}"
  >
    <template #operation="{ row, index }">
      <div>
        <el-button
          class="reset-margin"
          link
          type="primary"
          @click="clickbtn1(row, index)"
        >
          修改
        </el-button>
        <el-button
          class="reset-margin"
          link
          type="primary"
          @click="clickbtn2(row, index)"
          >删除</el-button
        >
      </div>
    </template>
  </pure-table>
</template>
<!-- <style lang="scss" scoped></style> -->
